<template>
    <div class="order-main main">
             <mt-header title="法币订单">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        <div class="container">
            <div class="nav order-list">
                <mt-button  v-bind:class="active=='tab-container1'?'active':''" size="small" @click="changeActive('tab-container1',fid)">进行中</mt-button>
                <mt-button v-bind:class="active=='tab-container2'?'active':''" size="small" @click="changeActive('tab-container2',fid)">已完成</mt-button>
                <mt-button v-bind:class="active=='tab-container3'?'active':''" size="small" @click="changeActive('tab-container3',fid)">已取消</mt-button>
            </div>
             <div class="page-tab-container" >
            <mt-tab-container class="page-tabbar-tab-container content" v-model="active" value="tab-container1">
                <mt-tab-container-item id="tab-container1" >
                    <div v-if="MyDealOrdesList.length>0">
                        <div class="order-table" v-for="(orderData, i) in MyDealOrdesList" v-bind:key="i" >
                            <router-link :to="{path:'/detail',query:{id:orderData.id,stat:0}}">
                            <div class="order-header">
                                <div class="flex-between black">
                                    <span >{{orderData.type}}USDT</span>
                                    <span>￥{{orderData.otcOrder.price}}CNY</span>
                                </div>
                            </div>
                            <div class="order-content flex-between">
                                <div class="left">
                                    <p>时间：{{ timestampToTime(new Date(orderData.createTime))}}</p>
                                    <p>总价：{{orderData.otcOrder.price* orderData.amount}}CNY</p>
                                    <p>数量：{{orderData.amount}}USDT</p>
                                     <p>交易对象：{{orderData.realName}}</p>
                                </div>
                                <div class="right flex-all-center">
                                    <div v-if="orderData.status==0" v-on:click="canOrder(orderData.id)" class="upper submit "   id="submit">待付款</div>
                                     <div v-if="orderData.status==1" v-on:click="canOrder(orderData.id)" class="upper submit "   id="submit">待放币</div>
                                     <div v-if="orderData.status==4" v-on:click="canOrder(orderData.id)" class="upper submit "   id="submit">冻结中</div>
                                      <div v-if="orderData.status==5" v-on:click="canOrder(orderData.id)" class="upper submit "   id="submit">申诉中</div>
                                <Interval :expirationTime="orderData.expirationTime" v-if="orderData.status==0||orderData.status==1"></Interval></div>
                            </div>
                            </router-link>
                        </div>
                    </div>
                    <div v-if="MyDealOrdesList.length==0" class="data-img">
                        <img src="../../assets/noData.png">
                        <p>暂无订单</p>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container2">
                    <div v-if="MyDealOrdesList.length>0">
                        <div class="order-table" v-for="(orderData, i) in MyDealOrdesList" v-bind:key="i" >
                             <router-link :to="{path:'/detail',query:{id:orderData.id,stat:1}}">
                            <div class="order-header">
                                <div class="flex-between black">
                                      <span >{{orderData.type}}USDT</span>
                                    <span>￥{{orderData.otcOrder.price}}CNY</span>
                                </div>
                            </div>
                            <div class="order-content flex-between">
                               <div class="left">
                                    <p>时间：{{ timestampToTime(new Date(orderData.createTime))}}</p>
                                    <p>总价：{{orderData.otcOrder.price* orderData.amount}}CNY</p>
                                    <p>数量：{{orderData.amount}}USDT</p>
                                     <p>交易对象：{{orderData.realName}}</p>
                                </div>
                            </div>
                              </router-link>
                        </div>
                    </div>
                    <div v-else class="data-img" >
                        <img src="../../assets/noData.png">
                        <p>暂无订单</p>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container3" >
                     <div v-if="MyDealOrdesList.length>0">
                        <div
                            v-infinite-scroll="loadMore"
                            infinite-scroll-disabled="isLoading" :infinite-scroll-immediate-check="true"
                            infinite-scroll-distance="10"  class="newsList">
                            <div class="order-table" v-for="(orderData, i) in MyDealOrdesList" v-bind:key="i" >
                                <div class="order-header">
                                    <div class="flex-between black">
                                          <span >{{orderData.type}}USDT</span>
                                        <span>￥{{orderData.otcOrder.price}}CNY</span>
                                    </div>
                                </div>
                                <div class="order-content flex-between">
                                    <div class="left">
                                    <p>时间：{{ timestampToTime(new Date(orderData.createTime))}}</p>
                                        <p>总价：{{orderData.otcOrder.price* orderData.amount}}CNY</p>
                                        <p>数量：{{orderData.amount}}USDT</p>
                                        <p>交易对象：{{orderData.realName}}</p>
                                    </div>
                                    <div class="right flex-center">
                                        <button style="color:#999999"  class="upper submit "   id="submit">已取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="loading-box tc" v-if="isLoading">
                                <mt-spinner type="snake" class="loading-more"></mt-spinner>
                                <span class="loading-more-txt">加载中...</span>
                            </div>
                            <div class="no-more" v-if="noMore">没有更多了~</div>
                    </div>
                    <div v-else class="data-img">
                        <img src="../../assets/noData.png">
                        <p>暂无订单</p>
                    </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import  Interval  from '@/components/trade/interval';
export default {
    components:{Interval},
    name:'myOrder',
    data(){
         return {
             list:[1,2,3,4,5,6],
             orderTabs:1, active: "tab-container1",
             MyDealOrdesList:[],
             historyOrdesList:[],
             fid:'',
             type:'',
             typeState:'',
             uid:null,
             isMoreLoading:false,
             isLoading:false,
             noMore:false,
             dealOrdes:1,
             dealList:[],
             sessionData:""
         }
    },
   
    mounted() {
          this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
               this.getMyDealOrdes(this.fid,0);
               this.uid=res.data.data.id;
        })
    },
    methods: {
            loadMore(stat) {
            this.isMoreLoading = true;
                this.isLoading = true;
                this.noMore = false;
                 if(this.active=="tab-container1"){
                    stat=0;
                    return ;
                }else  if(this.active=="tab-container2"){
                    stat=1
                }else  if(this.active=="tab-container3"){
                   stat=2
                }
            setTimeout(() => {
                this.$http.post('v1/myDealOtcList', {
                                cid: this.fid,status: stat,
                                page: this.dealOrdes,
                                pageSize: 10
                            },).then((res)=>{
               if(stat==0){
                    this.MyDealOrdesList=res.data.data.filter(item=>{
                     if(item.status==0||item.status==4||item.status==5){
                         this.dealList.push(item);
                        return item
                    }
                });
               }else if(stat==2){
                   this.MyDealOrdesList=res.data.data.filter(item=>{
                     if(item.status==3){
                          this.dealList.push(item);
                        return item
                    }
                });
               }else if(stat==1){
                   this.MyDealOrdesList=res.data.data.filter(item=>{
                     if(item.status==1){
                          this.dealList.push(item);
                        return item
                    }
                });
               }
               this.MyDealOrdesList=this.MyDealOrdesList.concat(this.dealList)
               
                   this.MyDealOrdesList.forEach(order=>{
                if ((order.otcOrder.type == 1 && this.uid == order.fuser.fid) || order.otcOrder.type == 0 && this.uid == order.otcOrder.fuser.fid) {
                                                if (order.otcOrder.type == 1) {
                                                    this.realName = order.otcOrder.fuser.frealName;
                                                 } else {
                                                    this.realName = order.fuser.frealName;
                                                }
                                        order.type = "买入";
                                        this.typeState=0;
                                    }else{
                                        if (order.otcOrder.type == 0) {
                                                    this.realName = order.otcOrder.fuser.frealName;
                                                } else {
                                                    this.realName = order.fuser.frealName;
                                                }
                                        order.type = "出售";
                                        this.typeState=1;
                                    }
                                    order.realName = this.realName;
                   })
            })
             this.dealOrdes++;
                this.isLoading = false;
                this.noMore = false;
                    this.isMoreLoading = false;
            }, 3000);
            },
         getOtcList(){
       this.$http.post('v1/getOtcList?', {page: 1,pageSize: 10}).then((res) => {
           let data=res.data;
            if (data.code == 200) {
                    for (var i = 0; i < data.data.length ; i++) {
                        if(data.data[i].fShortName=="OMNI-USDT"){
                            this.fid=data.data[i].fid;
                        }
                    }
            }
            this.getMyDealOrdes(this.fid,0) 
      })
    },
        getMyDealOrdes(cid,stat){
            this.$http.post('v1/myDealOtcList', {
                                cid: cid,status: stat,
                                page: 1,
                                pageSize: 10
                            },).then((res)=>{
              this.historyOrdesList=res.data.data;
              this.MyDealOrdesList=res.data.data;
              this.dealOrdes=1;
               if(stat==0){
                    this.MyDealOrdesList=res.data.data.filter(item=>{
                     if(item.status==1||item.status==4||item.status==5||item.status==0){
                        return item
                    }
                });
               }else if(stat==2){
                   this.MyDealOrdesList=res.data.data.filter(item=>{
                     if(item.status==3){
                        return item
                    }
                });
               }else if(stat==1){
                   this.MyDealOrdesList=res.data.data.filter(item=>{
                     if(item.status==2){
                        return item
                    }
                });
               }
                 let uid=this.uid;
                   this.MyDealOrdesList.forEach(order=>{
                if ((order.otcOrder.type == 1 && this.uid == order.fuser.fid) || order.otcOrder.type == 0 && this.uid == order.otcOrder.fuser.fid){
                                                if (order.otcOrder.type == 1) {
                                                    this.realName = order.otcOrder.fuser.frealName;
                                                    //telephone = order.otcOrder.fuser.ftelephone ? order.otcOrder.fuser.fareaCode + order.otcOrder.fuser.ftelephone : order.fuser.femail;
                                                } else {
                                                    this.realName = order.fuser.frealName;
                                                    //telephone = order.fuser.ftelephone ? order.fuser.fareaCode + order.fuser.ftelephone : order.fuser.femail;
                                                }
                                        order.type = "买入";
                                          this.typeState=0;
                                    }else{
                                        if (order.otcOrder.type == 0) {
                                                    this.realName = order.otcOrder.fuser.frealName;
                                                    //telephone = order.otcOrder.fuser.ftelephone ? order.otcOrder.fuser.fareaCode + order.otcOrder.fuser.ftelephone : order.fuser.femail;
                                                } else {
                                                    this.realName = order.fuser.frealName;
                                                    //telephone = order.fuser.ftelephone ? order.fuser.fareaCode + order.fuser.ftelephone : order.fuser.femail;
                                                }
                                        order.type = "出售";
                                          this.typeState=1;
                                    }
                           order.realName = this.realName;
                   })
            })
         },
        tabOrder(data){
            this.orderTabs=data
        },
         changeActive(id,fid){
             let cid=fid;
                this.active = id
                if(this.active=="tab-container1"){
                      this.getMyDealOrdes(cid,0);
                }else  if(this.active=="tab-container2"){
                     this.getMyDealOrdes(cid,1);
                }else  if(this.active=="tab-container3"){
                    this.getMyDealOrdes(cid,2);
                }
            },
            handleClose(){
                this.$router.go(-1);
            },
                  timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
        console.log(timestampToTime (1533293827000))
    },
    },
}
</script>
<style >
.main{
    background: #161736
}
.page-finance{
    background: #161736
}
.order-main .sell{
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
}
 .loading-box{
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center
    }
.order-main-header{
    display: flex;
    flex-direction: row;
    height: 100px;
}

.page-tab-container{
    height: 100%;
}
.data-img{
        min-height: 850px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}
.data-img img{
     /* width: 120px;
    height: 120px; */
}
.order-header{
    height: 80px;
    line-height: 80px;
    border-bottom:1px solid #222240
}
.rect{
    height:10px;
    background:rgba(244,244,244,1);
}
.order-content{
    padding-top: 20px;
}
.order-main .left p{
    height: 40px;
    font-size: 24px;
}
.data-img p{
    color: #fff
}
.nav{
    display: flex;
    flex-direction: row;
    background: #222240;
}
.order-list{
 padding-top: 100px;
}
.black{
    color: #E0E0F9;
    font-weight:600;
    font-size:32px;
}
.flex-center{
    display: flex;
   align-self: center;
}

.flex-between{
      display: flex;
        justify-content: space-between;
    }
    .end{
        background: #8c9fad
    }
   
    .submit {
    height: 68px;
    font-size: 28px;
    line-height: 68px;
    font-weight: 700;
    border-radius:5px;
}

.order-table{
    padding: 20px 30px 20px 30px;
    position: relative;
    color: #E0E0F9;
    margin-bottom: 20px;
    background: #222240;
}
.tabs .img{
    width: 40px;
    height: 40px;
    position: relative;
    right: 20px;
    top:30px;
}
.order-main .buy{
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
}
.order-main .buy span{
text-align: center;
width: 50%;
line-height: 100px;
height: 90%;
}
.flex-content{
      display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.order-main .sell span{
width: 50%;
height: 90%;
line-height: 100px;
}
.tab-content{
    width: 80%;
    margin: 0 auto;
    font-size: 32px;
    font-weight:500;
}
 .order-content .left{
        color: #E0E0F9;
    }
.order-main .tab{
display: flex;
background:rgba(255,255,255,1);
height: 100px;
border-bottom:1px solid #222240
}
.order-main .active{
color: #3381FF;
}
.order-main .mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #222240;
    color: #E0E0F9
}
.flex-all-center{
    display: flex;justify-content: center;
    align-items: center
}
.order-content .right{
    color: #3381FF
}
</style>